$(function () {
/***************************************/	
	
/*              滑动事件	            */
	
/***************************************/	
	lockScroll();
	//随机生成dog结构
	var arr1 = [];
	for(var i=0;i<25;i++){
		getx1(arr1);
	}
	function getx1(arr1){
		for(var i=0;i>-1;i++){
			var flag = true;
			var num1 = Math.floor(Math.random()*25)+1;
			for(var i in arr1){
				if(arr1[i] == num1){
					flag= false;
					break;
				}
			}
			if(flag == true){
				//console.log(num1);
				$(".dog").append("<div class='a"+num1+"'>"+num1+"</div>");
				arr1.push(num1);
				return;
			}
		}
	}
	//随机生成底部mini dog结构
	var arr2 = [];
	for(var i=0;i<25;i++){
		getx2(arr2);
	}
	function getx2(arr2){
		for(var i=0;i>-1;i++){
			var flag = true;
			var num2 = Math.floor(Math.random()*25)+1;
			for(var i in arr2){
				if(arr2[i] == num2){
					flag= false;
					break;
				}
			}
			if(flag == true){
				//console.log(num2);
				$("footer ul").append("<li class='a"+num2+"'>"+num2+"</li>");
				arr2.push(num2);
				return;
			}
		}
	}
	//开始拖曳
	var pressX = 0,
		pressY = 0;
	var obj = $('footer ul li');//触发页面
	var a,b,c;
	
	//手指按下时
	obj.bind('touchstart', function (event) {
		var touch = event.targetTouches[0];
		pressX = touch.pageX;
		pressY = touch.pageY;
		var current = $(this).attr("class");//获取当前结构class
		var top = $(".dog div."+current).offset().top;//获取目标结构top值
		var left = $(".dog div."+current).offset().left;//获取目标结构left值
		$(this).removeAttr('style');
		console.log(top,left);
		a = top;
		b = left;
		c = current;
	}, false);
	
	//手指滑动时
	obj.bind('touchmove', function (event) {
		event.preventDefault();
		var touch = event.targetTouches[0];
		var deltaX = touch.pageX - pressX;
		var deltaY = touch.pageY - pressY;
		$(this).css({"-webkit-transform":"translate3d("+deltaX+"px,"+deltaY+"px,0)"})
	}, false);
	
	//手指离开时
	obj.bind('touchend', function (event) {
		var t = $(this).offset().top;
		var l = $(this).offset().left;	
		console.log(t,l);			
		if(t>a-25 && t<a+25 && l>b-25 && l<b+25){
			console.log("匹配");
			$(this).remove();
			 $(".dog div."+c).addClass("old");
		}else{
			console.log("不匹配");
			$(this).css({"-webkit-transition":"0.3s ease -webkit-transform"});
			$(this).css({"-webkit-transform":"translate3d(0,0,0)"})			
		}
		var o = $(".dog").children(".old").length;//获取已匹配的个数
		if(o == 25){
			alert("结束")
			obj.unbind();//解除绑定
		}
	}, false);
	
	//禁止页面touchmove
	function lockScroll(){
		$('body').bind('touchmove',function(e){
			e.preventDefault();
		});			
	}
});